通过模糊弱化背景

昨天实现了阴影弱化背景，这里换个方式实现模糊弱化背景。
下面这种方式主要利用了box-shadow的扩展参数，把元素的投影向各个方向延伸放大。并且利用了viewport单位vmax。

1vmax相当于1vw和1vh两者中的较大值。100vw等于整个viewport的宽度，100vh等于整个viewport的高度

HTML:

<main>
    <button>show dialog</button>
    <p>
         2016 presidential campaign truly is a product of its time. When one presidential candidate loves to communicate with his voters through 140-character bursts on Twitter, and a hasty tweet can cause an international scandal, the other side has to be quick to respond in similar fashion. Hence a new internet gem courtesy of Hillary Clinton’s campaign website: “Donald Trump, Pepe the frog, and white supremacists: an explainer.”
    </p>
</main>
<dialog>this is a test this is a test click me click me</dialog>

CSS:

main{
    font: 150%/1.6 sans-serif;
    transition: .5s filter;
}
main.emphasized{
    filter: blur(5px);
    -webkit-filter: blur(5px);

    /*filter: blur(5px) contrast(.8) brightness(.8);
    -webkit-filter: blur(5px) contrast(.8) brightness(.8);*/
}
dialog{
    margin: auto;
    position: fixed;
    top:25%;
    left:50%;
    margin-left: -7.5em;
    z-index: 1;
    width: 15em;
    height: 4em;
    padding: 1em;
    border: 1px solid black;
    box-shadow: 0 .2em .5em rgba(0,0,0,.5),
                0 0 0 100vmax rgba(0,0,0,.2);
}
dialog:not([open]){
    display: none;
}

JS:

<script type="text/javascript">
    function $(selector,context){
        context = context || document;
        return context.querySelector(selector);
    }
    var main = $('main');
    var dialog = $('dialog');
    $('button').onclick = function(){
        dialog.setAttribute('open','true');
        main.classList.add('emphasized');
    }
    dialog.onclick = function(){
        if(dialog.close){
            dialog.close();
        }else{
            dialog.removeAttribute('open');
        }
        main.classList.remove('emphasized');
    }
</script>

滚动提示

这里模拟一种滚动提示，这种滚动提示类似于Android 4.0+设置列表中的滚动提示。当列表滚动到最底部(最顶部)时会有阴影效果。

首先，创建一个无序列表，设置好最基本的样式。然后就轮到径像渐变大展身手了。在列表的顶部添加一个渐变阴影。
HTML:

<ul>
    <li>高坂穗乃果</li>
    <li>园田海末</li>
    <li>南琴梨</li>
    <li>小泉花阳</li>
    <li>西木野真姬</li>
    <li>星空凛</li>
    <li>绚濑绘里</li>
    <li>东条希</li>
    <li>矢泽妮可</li>
</ul>

CSS:

ul{
    overflow: auto;
    width: 10em;
    height: 4em;
    padding: .3em .5em;
    border: 1px solid silver;
    list-style: none;

    background: radial-gradient(at top,rgba(0,0,0,.3),transparent 60%) no-repeat;
    background-size: 100% 25px;
}

这时候的效果如下：

当列表滚动时，上面的阴影会一直停留在相同的位置。如果设置background-attachment为local时会出现一个相反的效果：当我们滚动到最顶端时，能看到阴影。向下滚动时阴影就消失了。

这时候可以换一种思路，再添加一层与背景色相同的矩形遮盖层，用于遮盖阴影。将阴影背景的background-attachment设置为默认值，将矩形遮盖层设置为local。这样，它就会在我们滚动到最顶部时遮盖住阴影，向下滚动时露出阴影。

background: linear-gradient(white,hsla(0,0%,100%,0)),
            radial-gradient(at top,rgba(0,0,0,.3),transparent 60%);
background-repeat: no-repeat;
background-size: 100% 25px;
background-attachment: local,scroll;

最后再用相同的思路给底部添加上双层阴影，最终代码如下：

background: linear-gradient(white,hsla(0,0%,100%,0)) 0 0,
            radial-gradient(at top,rgba(0,0,0,.3),transparent 60%) 0 0,
            linear-gradient(hsla(0,0%,100%,0),white) bottom,
            radial-gradient(at bottom,rgba(0,0,0,.3),transparent 60%) bottom;
background-size: 100% 50px, 100% 25px,100% 50px, 100% 25px;
background-repeat: no-repeat;
background-attachment: local,scroll,local,scroll;

效果图：